<template>
    <div>
    
    <div class="title">
        <span class="triangle-left" @touchend="prev(index)">&lt</span>
        <i>{{xueqi_title[index]}}{{index%2==0?"第一学期":"第二学期"}} </i>
        <span class="triangle-right" @touchend="next(index)">&gt</span>
    </div>   
    <div class="content">
     <table class="dingwei">
        <thead >
            <tr height="40">
                <td >课程名称</td>
            </tr>
        </thead>
        <tbody width="" valign="middle">
            <tr v-for="obj in arr" >
                <td  class="kc" @touchend="show(obj.subject)">{{obj.subject | guolv}}</td>                
            </tr>
        </tbody>
     </table>
    <div class="al" v-show="bol" @touchend = 'hide()'>
        <div class="show_text">{{course}}</div>
    </div>
    <table id="tb" >
        <thead >
        <tr height="40">           
            <td >课程名称</td>
            <td >成绩</td>
            <td >等级</td>
            <td >成绩点</td>
            <td >学分</td>
            <td >任课老师</td>
            <td >是否补考</td>
            <td >补成绩</td>
        </thead>
        <tbody width="" valign="middle">
        <tr v-for="obj in arr" >
               
            <!-- <th>{{obj.subject}}</th> -->
            <td   v-for="(obj1,key) in obj" >{{key!='subject'?obj1:''| guolv}}</td>
        </tr>
        
       
        </tbody>
      
    </table>
    </div>
      
    <div class="ftb">
        {{school}}{{faculty}}{{classname}}
    </div>
    <footer>
        <p class="ftp">版权归属©xxx责任有限公司</p >   
     </footer>
    </div>
</template>
<script type="text/javascript">
        //每个学期一个数值 数组里的每个对象都是一门课程的详情
        var left = 0;//为了记录拖动的当前位置
       
        var subject_arr1=[
                         { "subject":"企业战略管理说服力的快速减肥了扣三分请对方来刷卡缴费 ",       "score":78,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"财务会计",          "score":85,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"工商管理",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"技术经济学",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"国际贸易理论与务实", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"推销原理与技巧",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"管理讲座",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
                          { "subject":"企业战略管理",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"财务会计",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                       
                 ];
                 var subject_arr2=[
                        { "subject":"建筑学工程力学",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"热电联产及环境保护技术",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"工程流体力学",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"燃气燃烧与应用",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"燃气检测", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"仪表检测及自动控制",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"能源管理自动化",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
  
                 ];var subject_arr3=[ 
                        { "subject":"设计基础",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"首饰设计表现技法",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"首饰CAD及快速成型",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"首饰制作工艺",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"首饰创意设计", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"珠宝首饰鉴定",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"首饰设计",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
  
                 ];var subject_arr4=[
                         { "subject":"计算机文化基础",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"工程力学",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"道路建筑材料",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"交通工程试验检测技术",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"隧道工程试验检测技术", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"桥梁工程试验检测技术",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"路基路面试验检测技术",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
                 ];var subject_arr5=[
                         { "subject":"高聚物合成工艺学",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"高分子材料化学基础",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"工程制图与CAD",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"机电控制基础",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"高分子材料与配方技术", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"高分子材料分析与测试",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"高分子材料成型模具",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
  
                 ];var subject_arr6=[
                        { "subject":"　机械制图与微机绘图",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"计算机在磨料磨具工业中的应用",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"磨料制造",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"无机材料科学基础",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"超硬材料及制品", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"磨具选择与使用",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"工程化学",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
  
                 ];var subject_arr7=[
                         { "subject":"地图制图、土地信息系统等",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"摄影测量与遥感概论",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"地理信息系统原理",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"GIS空间分析",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"GPS原理与应用", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"测绘工程",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"地理科学概论",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
                 ];var subject_arr8=[
                         { "subject":"飞机构造基础/现代航空制造技术",       "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李海","bukao":"no","bukaoc":"80"},
                         { "subject":"航空发动机结构与原理",          "score":89,"dengji":"优秀","cjd":5.5,"xuefen":"3分","teacher":"张泰","bukao":"no","bukaoc":"80"},
                         { "subject":"航空发动机试车工艺",          "score":80,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"李秀梅","bukao":"no","bukaoc":"80"},
                         {"subject":"航空发动机故障诊断与维修",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"周晗","bukao":"no","bukaoc":"80"},
                         { "subject":"飞机装配及机体修理", "score":82,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"何海德","bukao":"no","bukaoc":"80"},
                         { "subject":"航空发动机装配工艺",    "score":88,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"张晓晓","bukao":"no","bukaoc":"80"},
                         { "subject":"航空发动机试验与测试技术",         "score":81,"dengji":"优秀","cjd":2.8,"xuefen":"3分","teacher":"刘萌","bukao":"no","bukaoc":"80"},
                 ];
                 
                 var arr=[ subject_arr1,subject_arr2,subject_arr3,subject_arr4,subject_arr5,subject_arr6,subject_arr7,subject_arr8];


                 var xueqi_title=["2016-2017年","2016-2017年","2017-2018年","2017-2018年","2018-2019年","2018-2019年","2019-2020年","2019-2020年" ];
        export default{
           data(){
                return{
                     xuehao:12327213456,
                     name:"xxx",
                     school:"华南理工大学",
                     faculty:"计算机学院",
                     classname:"16级软件应用3班",
                     index:0,
                     xueqi:"",
                     arr:arr[0],
                     xueqi_title:xueqi_title,
                     left:0,
                     x:0,
                     bol:false,
                     course:""
                    

                }
           },
           filters:{
                guolv(str){
                    return str.length>10?(str.substr(0,10)+'...'):str;
                }
           },
           methods: {
                 prev: function(n) {
                    n--;
                    
                    if(n<0){
                        this.index=7;
                        n = 7;
                    }else{
                        this.index=n;
                    }
                    this.arr=arr[n];
                    tb.style.transform = "translate3d(0px,0px,0px)";  
                    left=0;
                   
                 
                 },
                 next: function(n) {
                    n++;
                    if(n>7){
                        this.index=0;
                        n = 0;
                    }else{
                        this.index=n;
                    }
                    this.arr=arr[n];
                    tb.style.transform = "translate3d(0px,0px,0px)";                
                    left=0;
                 },
                 show(con){
                    // alert(con);
                    this.course = con;
                    this.bol=true 
                 },
                 hide(){
                    this.bol=false
                 }

           },

           mounted(){

                // *防止移动端上下拖拉窗口
                window.onload=test();// 网页加载再执行
                function test(){
                     function stopDrop() {
                        var lastY;// 最后一次y坐标点
                        var bd = document.body;
                      document.addEventListener('touchstart', function(e) {
                            lastY = e.touches[0].clientY;// 点击屏幕时记录最后一次Y度坐标。
                            e.preventDefault();
                        });
                       document.addEventListener('touchmove', function(e) {
                            var y = e.touches[0].clientY;
                            var st = document.documentElement.scrollTop; //滚动条高度  
                            if (y >= lastY && st <= 10) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。防止移动端下拖拉窗口
                                lastY = y;
                                e.preventDefault();
                            }
                            if (y <= lastY && st <= 10) {//防止移动端上拖拉窗口
                                lastY = y;
                                e.preventDefault();
                            }
                            lastY = y;
                        });
                    }
                    stopDrop();
                }
                //拖动事件部分
                var content = document.querySelector(".content")
                var tb=document.getElementById('tb')
                tb.addEventListener("touchstart",function(e){
                    e.preventDefault() //阻止默认时间
                   
                    var dx=e.touches[0].clientX-left;
                    // var dy=e.touches[0].clientY-this.offsetTop;            
                    this.addEventListener("touchmove",function(e){
                        e.preventDefault()
                        var x=e.touches[0].clientX-dx;
                        // var y=e.touches[0].clientY-dy;
                        //判断他的拖动范围
                        if(x>0){
                            x=0;
                            e.preventDefault()
                        }else if(x<content.offsetWidth-tb.offsetWidth){
                            x=content.offsetWidth-tb.offsetWidth
                        }
                        //translate3d 性能最好 性能比left 好很多
                        tb.style.transform = "translate3d("+x+"px,0px,0px)";
                        // tb.style.transform = "translate3d(0px,"+y+"px,0px)";
                        left = x;
                      
                      
                    });
                });
               
                
                console.log(tb.offsetTop);
  
            },
            



        }

      
</script>
<style type="text/css">
    /*阻止长按复制文字默认事件*/
    * {
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    body{
       background: #fbfbfb;
    }
    .al{
        width: 100%;
        height: 100%;
        color: white;
        background: rgba(0,0,0,.5);
        position:fixed;
        left: 0;
        top: 0;
        margin: auto;
        z-index: 999;       
        text-align: center;
        font-size: 0.3rem;
        line-height:4rem; 

    }
    .show_text{
        width: 3.2rem;
        height: 1rem;
        position: relative;
        top: 40%;
        margin: auto;
        text-align: center;
        line-height:0.4rem;
    }
    .title{
        font-size: 0.2rem;
        margin: auto;
        background: #d2d1d1;
        text-align: center;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    .content{
        width:100%;
        overflow: hidden;
        position: relative;
    }
    .dingwei{
        float:left;
        position: absolute;
        left: 0px;
        width:0.96rem;
        z-index: 10;
    }
    .kc{
        background: #eeeeee;
        /* 限制两行 超出部分隐藏 并以... 形式展现出来*/
        /*text-align: center;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;*/
    }
    .triangle-left {
        width: 0.5rem;
        padding: 0.1rem 0.3rem;
        text-align: center;
        margin-right: .2rem;
        /*display: block;*/
        
        /*width: 0px;
        height: 0px ;
        border:19px solid #ccc;
        border-right: 40px solid #44b316; */

    }
    .triangle-right {
        width: 0.5rem;
         padding: 0.1rem 0.3rem;
        text-align: center;
        margin-left: .2rem;
       /*display: block;*/
       /* width: 0px;
        height: 0px ;
        border:19px solid #ccc;
        border-left: 40px solid #44b316; */

    }   
  

    p{
        padding-left:0.1rem;
        font-size:0.2rem; 
    }
    table{
        width:7.5rem;
        border-collapse:collapse;
         background:#fbf9fe;
         position:relative;
         left:0.02rem;
         transform-style: preserve-3d;
         -webkit-transform-style:preserve-3d;
    }
   tbody tr td:nth-child(1){
        position: absolute;
        left: -1rem;
        font-size: 13px;
    }
    thead tr td{
        width: 0.8rem;
        font-size: 0.16rem;
        background: #eee;
        border-radius: 0.02rem;
        text-align: center;
        border:1px solid #ccc;
       
    }
    thead tr td:nth-child(1){
        position: relative;
        left:0;
    }
    tbody tr td{
        width: 0.9375rem;
        font-size: 0.2rem;
        background: #f8f8f8;
        border-radius: 0.02rem;
        text-align: center;
        border:1px solid #ccc;
        height: 0.6rem;
        width: 1rem;
        text-align: center;

       
    }
    tbody tr td:nth-child(1){
        position: relative;
        left: 0;
    }
    .ftb{
        width: 100%;
        font-size: 0.16rem;
        color: black;
        text-align: center;
        background: #eeeeee;
        height: 0.4rem;
        line-height: 0.6rem;
    }
    .ftp{
        font-size: 12px;
        text-align: center;
        background: #f8f8f8;
        padding: 0.05rem 0 0.12rem;
    }
    footer{
        /*position: absolute;
        left:0;
        right: 0;*/
        margin: auto;
        /*bottom:50px;*/
    }

</style>